<template>
    <div class="container">
        <el-table :data="tableData" border stripe style="width: 700px"
            :default-sort="{ prop: 'sort', order: 'ascending' }">
            <el-table-column label="ID" prop="id">
                <template #default="{ row }">
                    {{ row.id }}
                </template>
            </el-table-column>
            <el-table-column label="主目录分类" prop="namech">
                <template #default="{ row }">
                    {{ row.namech }}
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort">
                <template #default="{ row }">
                    {{ row.sort }}
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status">
                <template #default="{ row }">
                    {{ row.status ? '启用' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="edit(row)">修改</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="add" @click="add">添加</div>

        <!-- 表单 -->
        <div class="form" v-if="isOpen">
            <el-form :model="newData">
                <div class="title">
                    <div>{{ title }}</div>
                    <div @click="close">❌</div>
                </div>
                <el-form-item label="ID" style="margin: 20px 100px;">
                    <el-input-number controls-position="right" v-model="newData.id" />
                </el-form-item>
                <el-form-item label="主目录分类名称(中文)" style="width: 500px; margin: 20px 100px;">
                    <el-input v-model="newData.namech" />
                </el-form-item>
                <el-form-item label="主目录分类名称(英文)" style="width: 500px; margin: 20px 100px;">
                    <el-input v-model="newData.nameen" />
                </el-form-item>
                <el-form-item label="购物网站排序" style="margin: 20px 100px;">
                    <el-input-number controls-position="right" v-model="newData.sort" />
                </el-form-item>
                <el-form-item label="状态" style="margin: 20px 100px;">
                    <el-radio-group v-model="newData.status">
                        <el-radio :value="true">启用</el-radio>
                        <el-radio :value="false">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-button size="large" style="margin: 20px 100px;" @click="cancel">取消</el-button>
                <el-button type="primary" size="large" style="margin-left:250px;" @click="confirm">确定</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const { tableData } = defineProps(['tableData'])
const emit = defineEmits(['addValue', 'editValue'])

const isOpen = ref(false)
const title = ref('')

const newData = ref({
    id: 1,
    namech: '',
    nameen: '',
    sort: 1,
    status: true,
})

// 编辑
const edit = (row) => {
    isOpen.value = true
    title.value = '编辑'
    let index = tableData.findIndex(item => item.id === row.id)
    newData.value = tableData[index]
}

// 增加
const add = () => {
    isOpen.value = true
    title.value = '添加'
}

// 关闭
const close = () => {
    isOpen.value = false
    clear()
}

// 取消
const cancel = () => {
    isOpen.value = false
    clear()
}

// 确定
const confirm = () => {
    isOpen.value = false
    console.log(newData.value);
    if (title.value === '添加') {
        emit('addValue', newData.value)
    } else {
        emit('editValue', newData.value)
    }
    clear()
}

// 清空表单
const clear = () => {
    newData.value = {
        namech: '',
        nameen: '',
        sort: 1,
        status: true,
    }
}
</script>

<style lang="scss" scoped>
.container {
    .add {
        border: 1px solid #000;
        height: 30px;
        width: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
    }

    // 表单
    .form {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.5);

        .el-form {
            height: 500px;
            width: 700px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

            .title {
                height: 50px;
                width: 100%;
                background-color: #ccc;
                border-radius: 5px 5px 0 0;
                display: flex;
                align-items: center;
                justify-content: space-between;

                div {
                    margin: 20px;
                }
            }
        }
    }
}
</style>